<template>
  <!-- 推荐服务组件 -->
  <div class="same-recommend">
    <a-card title="同类服务推荐">
      <a-card-grid
        v-for="(item,index) in recommendInfo"
        style="width: 25%; text-align: center"
        :key="index" >
        <!-- 服务图片 -->
        <img
          @click="goToDrugPage(item.name)"
          :src="$store.state.imgBaseUrl + item.picture"
          alt="服务图片"
          width="200"
          height="150"
        />
        <!-- 服务标题 -->
        <span class="title" @click="goToDrugPage(item.name)"
          >{{ item.name }}
        </span>
        <!-- 服务价格 -->
        <p style="color: #f34e0d">
          ￥<span
            style="
              font-size: 16px;
              font-family: Verdana, Geneva, Tahoma, sans-serif;
            "
            >{{ parseFloat(item.price).toFixed(2) }}</span
          >
        </p>
      </a-card-grid>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 接收服务信息的集合
      recommendInfo: [],
    };
  },
  methods: {
    /* 根据药名获取推荐同类的服务 */
    getSameRecommend() {
      let name = this.$route.params.name;
      console.log("参数", name);
      const _this = this;
      this.$axios.get("/medicine/recommend/" + name).then((res) => {
        _this.recommendInfo = res.data.data.data.records;
         console.log("同类型推荐", res);
      });
    },
    /* 跳转到相对应的服务页面 */
    goToDrugPage(name) {
      const { href } = this.$router.resolve({
        path: "/drug/" + name,
      });
      // 打开一个新的标签页
      window.open(href, "_self");
    },
  },
  created() {
    this.getSameRecommend();
  },
};
</script>

<style>
.same-recommend {
  margin-top: 38px;
  font-weight: 500;
}
.same-recommend .ant-card-head {
  text-align: left;
  background-color: #fafafa;
  color: #707070;
  font-weight: bold;
}

.same-recommend img {
  cursor: pointer;
}

.same-recommend .title {
  display: block;
  margin: 9px 0 5px;
  color: #707070;
  cursor: pointer;
}

.same-recommend .title:hover {
  color: #ff2c30;
}
.same-recommend p {
  margin: 0;
}
</style>
